<template>
  <el-drawer
    :title="flag?'产品编辑':'产品新增'"
    :direction="direction"
    :before-close="handleClose"
    v-model="visibilityBinding"
    size="55%"
  >
    <el-form>
      <div class="form-drawer">
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">产品名称：</span>
            <el-input
              placeholder="请填写产品名称"
              v-model="info.productName"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">产品编号：</span>
            <el-input
              placeholder="请填写产品编号"
              v-model="info.productId"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">其他名称：</span>
            <el-input
              placeholder="请填写其他名称"
              v-model="info.otherNames"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">CAS码：</span>
            <el-input
              placeholder="请填写CAS码"
              v-model="info.CASNumber"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">分子式：</span>
            <el-input
              placeholder="请填写产品分子式"
              v-model="info.molecularFormula"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="margin-right: 15px" class="demonstration"
              >分子量：</span
            >
            <el-input
              placeholder="请填写产品分子量"
              v-model="info.molecularWeight"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="margin-right: 15px" class="demonstration">规格：</span>
            <el-input
              placeholder="请填写产品规格"
              v-model="info.specifications"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="margin-right: 15px" class="demonstration">外貌：</span>
            <el-input
              placeholder="请填写产品外貌"
              v-model="info.appearance"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="margin-right: 15px" class="demonstration">好处：</span>
            <el-input
              placeholder="请填写产品好处"
              v-model="info.benefits"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="margin-right: 15px" class="demonstration">剂量：</span>
            <el-input
              placeholder="请填写产品剂量"
              v-model="info.dosage"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="margin-right: 15px" class="demonstration"
              >批量包装：</span
            >
            <el-input
              placeholder="请填写产品包装"
              v-model="info.bulkPackaging"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <!-- 富文本编辑器 -->
        <el-row style="margin-top: 20px">
          <div style="margin: 20px 0">产品内容：</div>
          <wangEditor :valueHtml="info.desc" ref="Editor"></wangEditor>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-button type="warning" @click="handleEdit(info)"> 重置 </el-button>
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="handleSubmit(info)"
          >
            提交
          </el-button>
        </el-row>
      </div>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import wangEditor from '../../wangEditor/index'
import { reactive } from 'vue'

const sort = ref([])
const infos = ref(null)
const Editor = ref(null)

const info = reactive({
  id: '',
  productName: '',
  productId: '',
  otherNames: '',
  CASNumber: '',
  molecularFormula: '',
  molecularWeight: '',
  specifications: '',
  appearance: '',
  benefits: '',
  dosage: '',
  bulkPackaging: '',
  desc: ''
})

const addInfo = reactive({})

const props = defineProps(['visibilityBinding', 'pagination', 'flag'])
const emits = defineEmits([
  'handleCloseEmits',
  'handleDrawerSubmitEmits',
  'addDrawerSubmitEmits'
])

onMounted(() => {
  Object.assign(info, props.pagination)
})

const handleEdit = (page) => {
  for (const key in page) {
    info[key] = ''
  }
  Editor.value.valueHtmls = ''
}

const handleClose = (visibilityBinding) => {
  visibilityBinding = false
  emits('handleCloseEmits', visibilityBinding)
}

const option = (page) => {}

const handleSubmit = (page) => {
  addInfo.productId = page.productId
  addInfo.productName = page.productName
  addInfo.otherNames = page.otherNames
  addInfo.CASNumber = page.CASNumber
  addInfo.molecularFormula = page.molecularFormula
  addInfo.molecularWeight = page.molecularWeight
  addInfo.specifications = page.specifications
  addInfo.appearance = page.appearance
  addInfo.benefits = page.benefits
  addInfo.dosage = page.dosage
  addInfo.bulkPackaging = page.bulkPackaging
  addInfo.desc = Editor.value.valueHtmls

  if (addInfo.productName == '') {
    return ElMessage.error('产品名称必填！')
  }
  if (addInfo.desc == '') {
    return ElMessage.error('内容必填！')
  }
  // 判断值是否为空
  if (props.flag) {
    addInfo.id = page.id
    emits('handleDrawerSubmitEmits', addInfo)
  } else {
    emits('addDrawerSubmitEmits', addInfo)
  }
}
</script>

<style lang="scss" scoped>
#form {
  padding: 20px;
}
.head {
  margin: 20px 0;
}
.form-search {
  display: flex;
  align-content: center;
  justify-content: right;
}
.form-search-input {
  text-align: right;
  width: 200px;
}
.form-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px auto;
}
.edit {
  padding: 20px 0;
}
.form-drawer {
  padding: 20px;
}
</style>
